<template>
  <el-form
    :model="formData"
    ref="form"
    class="form-wrap"
    style="padding-top:0px;display: block"
    :rules="rules"
    label-position="left"
    label-width="20%"
  >
    <div v-for="formItem in formItemList" :key="formItem.prop">
      <el-form-item
        v-if="formItem.type==='input'||formItem.type==='textarea'"
        :label="formItem.label"
        :type="formItem.type"
        :prop="formItem.prop"
      >
        <el-input v-model="formData[formItem.prop]" placeholder="请输入" />
      </el-form-item>
      <el-form-item v-if="formItem.type==='select'" :label="formItem.label" :prop="formItem.prop">
        <el-select clearable v-model="formData[formItem.prop]" placeholder="请选择">
          <el-option
            v-for="item in formItem.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="formItem.type==='radio'"
        :label="formItem.label"
        :prop="formItem.prop"
        class="radio-line-height"
      >
        <el-radio-group v-model="formData[formItem.prop]" placeholder="请选择">
          <el-radio
            v-for="item in formItem.options"
            :key="item.key"
            :label="item.title"
            :value="item.label"
          />
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="formItem.type==='datetime'" :label="formItem.label" :prop="formItem.prop">
        <el-date-picker type="datetime" v-model="formData[formItem.prop]" placeholder="选择日期"></el-date-picker>
      </el-form-item>
    </div>
  </el-form>
</template>

<script>
// import { changeQuestion, approvalQuestion, getApproveInfo } from "@/views/wy-operate/api/repair.js";
export default {
  props: {
    //form表单列表
    formItemList: Array,
    //验证规则
    // rules: Array
  },
  name: "commonForm",
  inject: ['initList'],
  data() {
    return {
      //弹窗类型，默认新增
      type: "add",
      //选中的物业
      radioId: "",
      //弹窗开关
      dialogVisible: false,
      //输入类型
      // input:文本搜索框;
      // dict: 字典筛选(下拉框展示),
      // radio: 单选框,
      // checkbox: 多选框,
      // select: 下拉框,
      // date: 日期,
      // daterange: 日期区间,
      // datetime: 时间日期,
      // datetimerange: 时间日期区间,
      // numberRange: 数字区间

      // 表单项
      formData: {},
      // 校验
      rules: {
        // initiator: [{ required: true, message: "上报人不能为空", trigger: "blur" }],
        // initiateTime: [{ required: true, message: "上报时间不能为空", trigger: "blur" }],
        // propertyName: [{ required: true, message: "物业名称不能为空", trigger: "blur" }],
        // problemDesc: [{ required: true, message: "问题描述不能为空", trigger: "blur" }],
      },
    }
  },
  computed: {
    // 判断是否只读
    isReadonly() {
      return ["preview", "approval"].includes(this.type);
    },
    isQualifieds() {
      return []
    }
  },
  methods: {
    //开启弹窗
    async show({ type, data = {} }) {
      this.type = type;
      this.dialogVisible = true;
    },
  },
}
</script>

<style lang="scss">
.form-wrap {
  .radio-line-height {
    label {
      line-height: 22px;
    }
  }
  .el-form-item {
    margin-bottom: 0;
  }
}
</style>
